<template>
  <!--  地图容器-->
  <baidu-map class="map" center="中国" :scroll-wheel-zoom="true" @ready="handler">
    <!-- 连线-->
    <bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="4" @click="showLineInfo(point)" />
    <!--聚合-->
    <bml-marker-clusterer>
      <bm-marker v-for="point of pointsInfo" :key="point.info.lng" :position="{lng: point.info.lng, lat: point.info.lat}" @click="lookDetail(point)" />
    </bml-marker-clusterer>
    <!--比例尺控件-->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
    <!--缩放控件-->
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
    <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
      <p><span class="left">设备名称：</span><span class="right">{{ infoWindow.info.equipmentName }}</span></p>
      <p><span class="left">设备编号：</span><span class="right">{{ infoWindow.info.equipmentNumber }}</span></p>
      <p><span class="left">设备类型：</span><span class="right">{{ infoWindow.info.equipmentType }}</span></p>
      <p><span class="left">电量（%）：</span><span class="right">{{ infoWindow.info.electricQuantity }}</span></p>
    </bm-info-window>
  </baidu-map>
</template>
<script>
import { fetchAllCoordinates, fetchAllPointsInfo } from '@/api/baiduMap'
import { BmlMarkerClusterer } from 'vue-baidu-map'
export default {
  components: {
    BmlMarkerClusterer
  },
  data: function() {
    return {
      show: false,
      points: [],
      polylinePath: [],
      infoWindow: {
        show: '',
        info: {
          name: '',
          lat: '',
          lng: '',
          equipmentName: '',
          equipmentNumber: '',
          equipmentType: '',
          electricQuantity: ''
        }
      },
      pointsInfo: [
        {
          info:
            {
              name: '',
              lat: '',
              lng: '',
              equipmentName: '',
              equipmentNumber: '',
              equipmentType: '',
              electricQuantity: ''
            },
          show: false
        }
      ]
    }
  },
  methods: {
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    handler({ BMap, map }) {
      this.getAllPointsInfo()
      this.getAllCoordinates()
    },
    getAllPointsInfo() {
      fetchAllPointsInfo().then((res) => {
        this.pointsInfo = res.data.pointsInfo
      })
    },
    getAllCoordinates() {
      fetchAllCoordinates().then((res) => {
        this.polylinePath = res.data.pointsList
      })
    },
    lookDetail(data, target) {
      this.infoWindow.info = data.info
      this.infoWindow.show = true
      this.activeName = data.name
      //  为弹窗口标题添加title
      this.$nextTick(() => {
        const win = document.querySelector('.BMap_bubble_title')
        win.title = this.activeName
      })
      // if (target === 'left') { //  点击的是左侧列表项，则不需要滚动
      //   this.map.center = { lng: data.lng, lat: data.lat }
      //   this.map.zoom = 15
      //   return
      // }
      // //  滚动到指定元素位置
      // this.$nextTick(() => {
      //   const obj = document.querySelector('.active')
      //   const scrollTop = obj.offsetTop
      //   this.$refs.box.scrollTop = scrollTop - 180
      // })
    },
    showLineInfo(point) {
      console.log(point)
    }
  }
}
</script>
<style>
.map {
  width: 100%;
  height: 600px;
}
</style>
